<template>
  <div>
    <div class="clearfix sticky-button">
      <el-row :gutter="20">
        <el-col :span="14" :offset="0">
          <el-input v-model="filterText" class="fitler" placeholder="筛选"
        /></el-col>
        <el-col :span="10" :offset="0">
          <el-button
            class="fl-right"
            size="small"
            type="primary"
            @click="relation"
            >确 定</el-button
          ></el-col
        >
      </el-row>
    </div>
    <div class="tree-content">
      <el-tree
        ref="menuTree"
        :data="menuTreeData"
        :default-checked-keys="menuTreeIds"
        :props="menuDefaultProps"
        default-expand-all
        highlight-current
        node-key="path"
        show-checkbox
        :filter-node-method="filterNode"
      >
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <span>{{ node.label }}</span>
          </span>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script setup>
import {
  getBaseMenuTree,
  getMenuAuthority,
  addMenuAuthority,
} from "~/api/menu";
import { ref, watch } from "vue";
import { message } from "~/utils/utils.js";

const menuDefaultProps = ref({
  children: "children",
  label: function (data) {
    return data.meta.title;
  },
});

const filterNode = (value, data) => {
  if (!value) return true;
  return data.meta.title.indexOf(value) !== -1;
};

// props相关
const props = defineProps({
  row: {
    default: function () {
      return {};
    },
    type: Object,
  },
});

// 筛选相关
const filterText = ref("");
watch(filterText, (val) => {
  menuTree.value.filter(val);
});

// 关联树 确认方法
const menuTree = ref(null);
const relation = async () => {
  const checkArr = menuTree.value.getCheckedNodes(false, true);
  const res = await addMenuAuthority({
    menus: checkArr,
    authorityId: props.row.authorityId,
  });
  if (res) {
    message("设置成功");
  }
};

const menuTreeData = ref([]);
const menuTreeIds = ref([]);
const init = async () => {
  // 获取所有菜单树
  const getBaseMenuTreeRes = await getBaseMenuTree();
  menuTreeData.value = getBaseMenuTreeRes;

  const getMenuAuthorityRes = await getMenuAuthority(props.row.authorityId);
  const menus = getMenuAuthorityRes.menus;
  buildMenu(menus);
  menuTreeIds.value = arr;
};
var arr = [];
const buildMenu = (menus) => {
  menus.forEach((item) => {
    // 只添加了子菜单的path
    if (item.children != null) {
      for (let i in item.children) {
        arr.push(item.children[i].path);
        // 递归 避免子菜单还存在下级子菜单
        if (item.children[i].children != null) {
          buildMenu(item.children[i].children);
        }
      }
    }
  });
  // 添加仪表盘 每个角色默认都有仪表盘权限
  arr.push("dashboard");
};

// 调用初始化数据方法
init();
</script>

<style lang="scss" scope>
.tree-content {
  overflow: auto;
  height: calc(100vh - 100px);
  margin-top: 10px;
}
.custom-tree-node {
  span + span {
    margin-left: 12px;
  }
}
.clearfix:after {
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}
.sticky-button {
  position: sticky;
  top: 2px;
  z-index: 2;
  background-color: #fff;
}
</style>
